<link rel="stylesheet"  type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />
<import type='css' file="css.fudong.ccclubs-parking-lots" />

<style>
    #iCenter{ height:760px;}
    .hot1{background:url(../Public/img/map_maker_1.png) no-repeat left top; background-size: 10%; padding-left:20px;}
    .hot2{background:url(../Public/img/map_maker_2.png) no-repeat left top; background-size: 10%; padding-left: 20px;}
    .hot3{background:url(../Public/img/map_maker_3.png) no-repeat left top; background-size: 10%; padding-left: 20px;}
    .hot4{background:url(../Public/img/map_maker_4.png) no-repeat left top; background-size: 10%; padding-left: 20px;}
    .hot5{background:url(../Public/img/map_maker_5.png) no-repeat left top; background-size: 10%; padding-left:20px;}
    .hot1 i,.hot2 i,.hot3 i,.hot4 i,.hot5 i{padding-left: 10px; color: #B0B0B0;}
    #Pop-ups{position: absolute;margin-left: 250px;margin-top: 0;}
</style>

<style>
    .top{
        background:rgb(75, 171, 251);
        height: 70px;
        color: #ffffff;
    }

    .top_left{
        float:left;
        margin:3px 0 0 30px;
    }

    .top_right{
        float:right;
        font-size:16px;
        margin: 15px 20px 0 0;
    }

    .buttom_top{
        margin: 30px;
    }
    .buttom_top_left{
        width: 400px;
        float: left;
        font-size: 20px;
        margin-left: 0px;
    }
    .buttom_top_left ul{ padding: 0; margin: 0}
    .buttom_top_left ul li{
        margin: 5px;
        padding: 0;
    }

    .buttom_top_right{
        width: 30px;
        height: 50px;
        padding-top: 28px;
        background-image: url(__PUBLIC__/img/onlinArr.png);
        background-repeat: no-repeat;
        float: right;
        margin-right:10px;
    }
    .wifi_01{ background-position: -34px 0;}
    .buttom_top_right img{
        margin-right: 10px;
    }

    .buttom_center{
        margin: 30px 0 0 0;
    }
    .buttom_center_left{
        margin-left: 70px;
    }

    .one_hao{
        padding-top: 27px;
        float: left;
        line-height: 100%;
        font-family: verdana, helvetica, arial, sans-serif;
    }
    .one{
        font-size: 44px;
    }
    .hao{
        font-size: 16px;
    }
    .charge{
        font-size: 11px;
        margin-top: 5px;
    }
    .xian{
        float: left;
        margin-left: 30px;
        width: 1px;
        height: 75px;
        background-color:lightgray ;
    }

    .dianchi{
        float: left;
        width: 25px;
        height: 45px;
        background-image:url(__PUBLIC__/img/barArr.png);
        background-repeat: no-repeat;
        margin: 18px 0 0 30px;
    }
    .dc_01{ background-position: 0 0;}
    .dc_02{ background-position: -34px 0;}
    .dc_03{ background-position: -68px 0;}
    .dc_04{ background-position: -103px 0;}

    .state{
        float: left;
        margin:25px 0 0 35px; font-size: 20px;

    }
    .btArrStyle{ padding:15px 25px 40px 25px; margin: 0;}

    .btArrStyle li{
        float:left;
        width:100px;
        height:90px;
        margin: 18px 0 0 30px;


    }
    .btArr_01{
        background-position: 0 0;
    }
    .btArr_02{
        background-position:-200px;

    }
    .btArr_03{
        background-position:-240px;

    }
    .btarr_04{
        background-position:-410px;

    }



    .CB{
        clear: both;
    }
</style>
<script language="javascript" type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=da5c9bd9f70038433326fe62a56b2cc5"></script>
<import file="js.jquery#chained" />
<import file="js.jQuery#md5" />

<script type="text/javascript">

</script>

<script type="text/javascript">
	function Nav()
	{
		if(window.navigator.userAgent.indexOf("MSIE")>=1) return 'IE';
		else if(window.navigator.userAgent.indexOf("Firefox")>=1) return 'FF';
		else return "OT";
	}
    function getRandomNum(Min,Max)
    {
        var Range = Max - Min;
        var Rand = Math.random();
        var ss = Min + Math.round(Rand * Range);
        return(Min + Math.round(Rand * Range));
    }

    function getToken(hao,randomKey)
    {
        var one = hao.substr(0, 4);
        var two = hao.substr(4,12);
        one = $.md5(one);
        two = $.md5(two);

        //var randomKey=getRandomNum(1,10);
        var result = one + randomKey + two;
        result = $.md5(result);
        return (result);

    }
</script>
<script language="javascript" type="text/javascript">
    var mapObj;
    //基本地图加载
    function mapInit(){
        mapObj = new AMap.Map("iCenter", {
            //resizeEnable: true,
            //rotateEnable: true,
            //dragEnable: true,
            //zoomEnable: true,
            //设置可缩放的级别
            //zooms: [3,18],
            //传入2D视图，设置中心点和缩放级别
            view: new AMap.View2D({
                //center: new AMap.LngLat({$coordinate}),//默认地点坐标（北京）
                zoom: 5
            })
        });
        mapObj.plugin('AMap.Geolocation', function () {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            mapObj.addControl(geolocation);
            AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
        //地图中添加地图操作ToolBar插件
        mapObj.plugin(["AMap.ToolBar"],function() {
            toolBar = new AMap.ToolBar();
            mapObj.addControl(toolBar);
        });
        //查询站点
        /*$.ajax({
            type:"post",
            url:'__URL__/map_sel',
            // data:'id='+id,
            async:false,
            success:function(data){
//                alert(data);
               var arr=data.split("+");
                for(var i=0;i<arr.length-1;i++){
                    var ar=arr[i].split(",");
//                    alert(ar[7]);
                    if(ar[1] != '' && ar[2] != ''){
                        addMark(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]));
                    }
                }
            }
        });*/
    }

    $(document).ready(function(){

        $("#location-s").chained("#location-f");
        $("#location-t").chained("#location-s");
        //初始实时站点
        $.ajax({
            type:"post",
            url:'__URL__/map_sel',
            // data:'id='+id,
            success:function(data){
                arr=data.split("+");
                for(var i=0;i<arr.length-1;i++){
                    var ar=arr[i].split(",");
                    if(ar[1] != '' && ar[2] != ''){
                        addMark(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                    }
                }
            }
        });

        //所有站点
        $(".s_now").click(function(){
            mapObj.clearMap();
            $(".s_will").removeClass("sel");
            $(".s_state").removeClass("sel");
            $(this).addClass("sel");
            $.ajax({
                type:"post",
                url:'__URL__/map_now',
                success:function(data){
                    arr=data.split("+");
                    for(var i=0;i<arr.length-1;i++){
                        var ar=arr[i].split(",");
//                    alert(arr[7]);
                        if(ar[1] != '' && ar[2] != ''){
                            addMark_now(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                        }
                    }
                }
            });
        });
        //实时站点
        $(".s_state").click(function(){
        	

        	/* var obj = document.getElementById("hot_sites"); 
        	
        	obj.style.display = (Nav()=='IE' ? 'block' : 'table-row');
        	
        	  */
        	
        	mapObj.clearMap();
        	
            $(".s_now").removeClass("sel");
            $(".s_will").removeClass("sel");
            $(this).addClass("sel");
            $.ajax({
                type:"post",
                url:'__URL__/map_sel/',
                // data:'id='+id,
                success:function(data){
                    arr=data.split("+");
                    for(var i=0;i<arr.length-1;i++){
                        var ar=arr[i].split(",");
//                    alert(arr[7]);
                        if(ar[1] != '' && ar[2] != ''){
                            addMark(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                        }
                    }
                }
            });
        });

        
        $(".s_state_1").click(function(){
        	

        /* 	var obj = document.getElementById("hot_sites"); 
        	
        	obj.style.display = (Nav()=='IE' ? 'block' : 'table-row');
        	 */
        	
        	
        	
        	mapObj.clearMap();
        	
            $(".s_now").removeClass("sel");
            $(".s_will").removeClass("sel");
            $(this).addClass("sel");
            $.ajax({
                type:"post",
                url:'__URL__/map_sel/hotflag/1',
                // data:'id='+id,
                success:function(data){
                    arr=data.split("+");
                    for(var i=0;i<arr.length-1;i++){
                        var ar=arr[i].split(",");
//                    alert(arr[7]);
                        if(ar[1] != '' && ar[2] != ''){
                            addMark(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                        }
                    }
                }
            });
        });     
        
        
        $(".s_state_2").click(function(){
        	

        /* 	var obj = document.getElementById("hot_sites"); 
        	
        	obj.style.display = (Nav()=='IE' ? 'block' : 'table-row');
        	 */
       
        	
        	mapObj.clearMap();
        	
            $(".s_now").removeClass("sel");
            $(".s_will").removeClass("sel");
            $(this).addClass("sel");
            $.ajax({
                type:"post",
                url:'__URL__/map_sel/hotflag/2',
                // data:'id='+id,
                success:function(data){
                    arr=data.split("+");
                    for(var i=0;i<arr.length-1;i++){
                        var ar=arr[i].split(",");
//                    alert(arr[7]);
                        if(ar[1] != '' && ar[2] != ''){
                            addMark(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                        }
                    }
                }
            });
        });            
        
        
        $(".s_state_3").click(function(){
        	

 /*        	var obj = document.getElementById("hot_sites"); 
        	
        	obj.style.display = (Nav()=='IE' ? 'block' : 'table-row');
        	 */
        	
        	 
        	
        	mapObj.clearMap();
        	
            $(".s_now").removeClass("sel");
            $(".s_will").removeClass("sel");
            $(this).addClass("sel");
            $.ajax({
                type:"post",
                url:'__URL__/map_sel/hotflag/3',
                // data:'id='+id,
                success:function(data){
                    arr=data.split("+");
                    for(var i=0;i<arr.length-1;i++){
                        var ar=arr[i].split(",");
//                    alert(arr[7]);
                        if(ar[1] != '' && ar[2] != ''){
                            addMark(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                        }
                    }
                }
            });
        });           
        
        $(".s_state_4").click(function(){
        	

        /* 	var obj = document.getElementById("hot_sites"); 
        	
        	obj.style.display = (Nav()=='IE' ? 'block' : 'table-row');
        	 */
        	
        	 
        	
        	mapObj.clearMap();
        	
            $(".s_now").removeClass("sel");
            $(".s_will").removeClass("sel");
            $(this).addClass("sel");
            $.ajax({
                type:"post",
                url:'__URL__/map_sel/hotflag/4',
                // data:'id='+id,
                success:function(data){
                    arr=data.split("+");
                    for(var i=0;i<arr.length-1;i++){
                        var ar=arr[i].split(",");
//                    alert(arr[7]);
                        if(ar[1] != '' && ar[2] != ''){
                            addMark(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                        }
                    }
                }
            });
        });     
        
        
        
        $(".s_state_5").click(function(){
        	

        /* 	var obj = document.getElementById("hot_sites"); 
        	
        	obj.style.display = (Nav()=='IE' ? 'block' : 'table-row');
        	 */
        	
        	 
        	
        	mapObj.clearMap();
        	
            $(".s_now").removeClass("sel");
            $(".s_will").removeClass("sel");
            $(this).addClass("sel");
            $.ajax({
                type:"post",
                url:'__URL__/map_sel/hotflag/5',
                // data:'id='+id,
                success:function(data){
                    arr=data.split("+");
                    for(var i=0;i<arr.length-1;i++){
                        var ar=arr[i].split(",");
//                    alert(arr[7]);
                        if(ar[1] != '' && ar[2] != ''){
                            addMark(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                        }
                    }
                }
            });
        });            
        
        
        //预设站点
        $(".s_will").click(function(){
            mapObj.clearMap();
            $(".s_now").removeClass("sel");
            $(".s_state").removeClass("sel");
            $(this).addClass("sel");
            $.ajax({
                type:"post",
                url:'__URL__/map_will',
                success:function(data){
                    arr=data.split("+");
                    for(var i=0;i<arr.length-1;i++){
                        var ar=arr[i].split(",");
//                    alert(arr[7]);
                        if(ar[1] != '' && ar[2] != ''){
                            addMark_will(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                        }
                    }
                }
            });
        });

        //模糊搜索站点查询
        $(".search").click(function(){
            mapObj.clearMap();
            var name =$("input[name='name']").val();
            if(name == ''){
                alertify.error("站点名称不能为空！");
            }else{
                $.ajax({
                    type:"get",
                    url:'__URL__/map_name',
                    data:'name='+name,
                    success:function(data){
                        arr=data.split("+");
                        for(var i=0;i<arr.length-1;i++){
                            var ar=arr[i].split(",");
                            if(ar[1] != '' && ar[2] != ''){
                                addMark_name(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                            }
                        }
                    }
                });
            }
        });

        //按省市区模糊查询
        $("#location-t").click(function(){
            mapObj.clearMap();
            var loc_t = $(this).val();
            var loc_s = $("#location-s").val();
            var loc_f = $("#location-f").val();
            $.ajax({
                type:"get",
                url:'__URL__/map_loc/location_f_1/'+loc_f+'/location_s_1/'+loc_s+'/location_t_1/'+loc_t,
                success:function(data){
                    arr=data.split("+");
                    for(var i=0;i<arr.length-1;i++){
                        var ar=arr[i].split(",");
                        if(ar[1] != '' && ar[2] != ''){
                            addMark_name(ar[0],parseFloat(ar[1]),parseFloat(ar[2]),ar[3],parseInt(ar[4]),ar[5],parseInt(ar[6]),parseInt(ar[7]),parseInt(ar[8]));
                        }
                    }
                }
            });
        });
    });

    function addMark(nameString,locposX,locposY,titleString,typeid,contentString,plant_id,is_active,state_i){
        var imgString="";
/*          if(state_i == 0){
            imgString="__PUBLIC__/img/type_gb_w2.png";
        }else{
            imgString="__PUBLIC__/img/red.png";
        }  */

        
        switch (state_i)
        {
        case 5:
        	imgString="__PUBLIC__/img/map_maker_5.png";
          break;  
        case 4:
        	imgString="__PUBLIC__/img/map_maker_4.png";
          break;
          
        case 3:
        	imgString="__PUBLIC__/img/map_maker_3.png";
            break;
        case 2:
        	imgString="__PUBLIC__/img/map_maker_2.png";
            break;
            
        case 1:
        	imgString="__PUBLIC__/img/map_maker_1.png";
            break; 
        default:
        	return;
        	//imgString="__PUBLIC__/img/map_maker_5.png";
        }
/*          if(state_i == 5){
            imgString="__PUBLIC__/img/map_maker_5.png";
        }else if(state_i == 4){
            imgString="__PUBLIC__/img/map_maker_4.png";
            
        }else if(state_i == 3){  
        	imgString="__PUBLIC__/img/map_maker_3.png";
        }else if(state_i == 2){
        	imgString="__PUBLIC__/img/map_maker_2.png";
        }else if(state_i == 1){
        	
        	imgString="__PUBLIC__/img/map_maker_1.png";
        }  */
        
        
        
        
        var nameString;

        nameString = new AMap.Marker({ //创建自定义点标注
            map: mapObj,
            position: new AMap.LngLat(locposX, locposY),
            offset: new AMap.Pixel(-10,-34),
            icon: imgString
        });
        var info = [];

        info.push("<b>"+titleString+"</b><br>");

        var strs = '';
        var str = '';
        $.ajax({
            type:"post",
            url:'__URL__/map_sel_state_count',
            data:'plant_id='+plant_id,
            dataType:"json",
            async:false,
            success:function(data){
                $.each(data, function (n, value) {
                    var n = n+1;
                    if(value.stateInfo){
                        if(value.stateInfo.charge == 0 && value.stateInfo.error == 0 && value.stateInfo.bespeak == 0 && value.stateInfo.cable == 0){
                            str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.stateInfo.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"'  data-info='"+value.address+"' data-code='"+value.now_user+"' data-title='"+value.title+"' data-target='#tan' data-toggle='modal' data-id='"+value.stateInfo.id+"'><img style='width: 56px;height: 56px' src='__PUBLIC__/img/mapbt_1.png' alt='空闲'/></a><br />"+n+"号电桩";//空闲
                        }
                        else if(value.stateInfo.charge == 1 && value.stateInfo.error == 0 && value.stateInfo.bespeak == 0 && value.stateInfo.cable == 0){
                            str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.stateInfo.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"' data-info='"+value.address+"' data-code='"+value.now_user+"' data-title='"+value.title+"'  data-target='#tan' data-toggle='modal' data-id='"+value.stateInfo.id+"'><img style='width: 56px;height: 56px' src='__PUBLIC__/img/mapbt_2.png' alt='充电'/></a><br />"+n+"号电桩";//充电

                        }
                        else if(value.stateInfo.charge == 0 && value.stateInfo.error == 0 && value.stateInfo.bespeak == 1 && value.stateInfo.cable == 0){
                            str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.stateInfo.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"' data-info='"+value.address+"' data-code='"+value.now_user+"' data-title='"+value.title+"' data-target='#tan' data-toggle='modal' data-id='"+value.stateInfo.id+"'><img style='width: 56px;height: 56px' src='__PUBLIC__/img/mapbt_3.png' alt='已预约'/></a><br />"+n+"号电桩";//充电
                        }
                        else if(value.stateInfo.charge == 0 && value.stateInfo.error == 1 && value.stateInfo.bespeak == 0 && value.stateInfo.cable == 0 ||  value.stateInfo.charge == 0 && value.stateInfo.error == 1 && value.stateInfo.bespeak == 0 && value.stateInfo.cable == 1 || value.stateInfo.charge == 0 && value.stateInfo.error == 0 && value.stateInfo.bespeak == 0 && value.stateInfo.cable == 1){
                            str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.stateInfo.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"' data-info='"+value.address+"' data-code='"+value.now_user+"' data-title='"+value.title+"' data-target='#tan' data-toggle='modal' data-id='"+value.stateInfo.id+"'><img style='width: 56px;height: 56px' src='__PUBLIC__/img/mapbt_4.png' alt='下线'/></a><br />"+n+"号电桩";//充电
                        }
                    }
                    strs += "<li>"+str+"</li>";
                });
                return strs;
            }
        });

        info.push("<div style='line-height: 150%; padding: 10px 5px; border-top:#e3e3e3 solid 1px; margin-top: 10px; '>地址："+contentString+"<ul class='mapBtStyle'>"+strs+"</ul></div>");

        var inforWindow = new AMap.InfoWindow({
            offset:new AMap.Pixel(5,-23),
            content:info.join("")
        });
        AMap.event.addListener(nameString,"mouseover",function(e){
            inforWindow.open(mapObj,nameString.getPosition());
        });
    }

    //站点模糊查询
    function addMark_name(nameString,locposX,locposY,titleString,typeid,contentString,plant_id,is_active,current_state){

        var imgString="";
        if(is_active == 1 && current_state == 1){
            imgString="__PUBLIC__/img/type_gb_w2.png";
        }else if(is_active != 1 && current_state == 1){
            imgString="__PUBLIC__/img/type_byd.png";
        }else if(is_active != 1 && current_state != 1){
            imgString="__PUBLIC__/img/type_qt.png";
        }else{
            imgString="__PUBLIC__/img/type_qt.png";
        }
        var nameString;

        nameString = new AMap.Marker({ //创建自定义点标注
            map: mapObj,
            position: new AMap.LngLat(locposX, locposY),
            offset: new AMap.Pixel(-10,-34),
            icon: imgString
        });
        var info = [];
        info.push("<b>"+titleString+"</b><br>");

        var strs = '';
        var str = '';
        $.ajax({
            type:"post",
            url:'__URL__/map_sel_state_count',
            data:'plant_id='+plant_id,
            dataType:"json",
            async:false,
            success:function(data){
                $.each(data, function (n, value) {
                    var n = n+1;
                    if(value.charge == 0 && value.error == 0 && value.bespeak == 0 && value.cable == 0){
                        str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"'  data-info='"+value.address+"'  data-title='"+value.plant_name+"' data-code='"+value.now_user+"' data-target='#tan' data-toggle='modal' data-id='"+value.state_id+"'> <img src='__PUBLIC__/img/mapbt_1.png' alt='空闲'/></a><br />"+n+"号电桩";//空闲
                    }
                    else if(value.charge == 1 && value.error == 0 && value.bespeak == 0 && value.cable == 0){
                        str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"' data-info='"+value.address+"'  data-title='"+value.plant_name+"' data-code='"+value.now_user+"'  data-target='#tan' data-toggle='modal' data-id='"+value.state_id+"'><img src='__PUBLIC__/img/mapbt_2.png' alt='充电'/></a><br />"+n+"号电桩";//充电

                    }
                    else if(value.charge == 0 && value.error == 0 && value.bespeak == 1 && value.cable == 0){
                        str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"' data-info='"+value.address+"' data-title='"+value.plant_name+"' data-code='"+value.now_user+"' data-target='#tan' data-toggle='modal' data-id='"+value.state_id+"'><img src='__PUBLIC__/img/mapbt_3.png' alt='已预约'/></a><br />"+n+"号电桩";//充电
                    }
                    else if(value.charge == 0 && value.error == 1 && value.bespeak == 0 && value.cable == 0 ||  value.charge == 0 && value.error == 1 && value.bespeak == 0 && value.cable == 1 || value.charge == 0 && value.error == 0 && value.bespeak == 0 && value.cable == 1){
                        str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"' data-info='"+value.address+"'  data-title='"+value.plant_name+"' data-code='"+value.now_user+"' data-target='#tan' data-toggle='modal' data-id='"+value.state_id+"'><img src='__PUBLIC__/img/mapbt_4.png' alt='下线'/></a><br />"+n+"号电桩";//充电
                    }
                    strs += "<li>"+str+"</li>";
                });
                return strs;
            }
        });
        info.push("<div style='line-height: 150%; padding: 10px 4px; border-top:#e3e3e3 solid 1px; margin-top: 10px; '>地址："+contentString+"<ul class='mapBtStyle'>"+strs+"</ul></div>");
        var inforWindow = new AMap.InfoWindow({
            offset:new AMap.Pixel(5,-23),
            content:info.join("")
        });
        AMap.event.addListener(nameString,"mouseover",function(e){
            inforWindow.open(mapObj,nameString.getPosition());
        });
    }

    //所有站点
    function addMark_now(nameString,locposX,locposY,titleString,typeid,contentString,plant_id,is_active,current_state){

        var imgString="";
        if(is_active == 1 && current_state == 1){
            imgString="__PUBLIC__/img/type_gb_w2.png";
        }else if(is_active != 1 && current_state == 1){
            imgString="__PUBLIC__/img/type_byd.png";
        }else if(is_active != 1 && current_state != 1){
            imgString="__PUBLIC__/img/type_qt.png";
        }else{
            imgString="__PUBLIC__/img/type_qt.png";
        }
        var nameString;

        nameString = new AMap.Marker({ //创建自定义点标注
            map: mapObj,
            position: new AMap.LngLat(locposX, locposY),
            offset: new AMap.Pixel(-10,-34),
            icon: imgString
        });
        var info = [];
        info.push("<b>"+titleString+"</b><br>");

        /*var strs = '';
         var str = '';
         $.ajax({
         type:"post",
         url:'__URL__/map_sel_state_count',
         data:'plant_id='+plant_id,
         dataType:"json",
         async:false,
         success:function(data){
         $.each(data, function (n, value) {
         var n = n+1;
         if(value.charge == 0 && value.error == 0 && value.bespeak == 0 && value.cable == 0){
         str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"'  data-info='"+value.address+"'  data-title='"+value.plant_name+"' data-code='"+value.now_user+"' data-target='#tan' data-toggle='modal' data-id='"+value.state_id+"'> <img src='__PUBLIC__/img/mapbt_1.png' alt='空闲'/></a><br />"+n+"号电桩";//空闲
         }
         else if(value.charge == 1 && value.error == 0 && value.bespeak == 0 && value.cable == 0){
         str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"' data-info='"+value.address+"'  data-title='"+value.plant_name+"' data-code='"+value.now_user+"'  data-target='#tan' data-toggle='modal' data-id='"+value.state_id+"'><img src='__PUBLIC__/img/mapbt_2.png' alt='充电'/></a><br />"+n+"号电桩";//充电

         }
         else if(value.charge == 0 && value.error == 0 && value.bespeak == 1 && value.cable == 0){
         str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"' data-info='"+value.address+"' data-title='"+value.plant_name+"' data-code='"+value.now_user+"' data-target='#tan' data-toggle='modal' data-id='"+value.state_id+"'><img src='__PUBLIC__/img/mapbt_3.png' alt='已预约'/></a><br />"+n+"号电桩";//充电
         }
         else if(value.charge == 0 && value.error == 1 && value.bespeak == 0 && value.cable == 0 ||  value.charge == 0 && value.error == 1 && value.bespeak == 0 && value.cable == 1 || value.charge == 0 && value.error == 0 && value.bespeak == 0 && value.cable == 1){
         str = "<a href='#tan' onclick='instruct(this)' data-location='"+value.s_key_link+"' data-pid='"+n+"'  data-nld='"+value.wifi+"' data-oid='"+value.evc_number+"' data-text='"+value.trademark+"' data-info='"+value.address+"'  data-title='"+value.plant_name+"' data-code='"+value.now_user+"' data-target='#tan' data-toggle='modal' data-id='"+value.state_id+"'><img src='__PUBLIC__/img/mapbt_4.png' alt='下线'/></a><br />"+n+"号电桩";//充电
         }
         strs += "<li>"+str+"</li>";
         });
         return strs;
         }
         });
         info.push("<div style='line-height: 150%; padding: 10px 4px; border-top:#e3e3e3 solid 1px; margin-top: 10px; '>地址："+contentString+"<ul class='mapBtStyle'>"+strs+"</ul></div>");*/
        info.push("<div style='line-height: 150%; padding: 10px 4px; border-top:#e3e3e3 solid 1px; margin-top: 10px; '>地址："+contentString+"</div>");
        var inforWindow = new AMap.InfoWindow({
            offset:new AMap.Pixel(5,-23),
            content:info.join("")
        });
        AMap.event.addListener(nameString,"mouseover",function(e){
            inforWindow.open(mapObj,nameString.getPosition());
        });
    }

    //预设站点
    function addMark_will(nameString,locposX,locposY,titleString,typeid,contentString,plant_id,is_active,current_state){

        var imgString="__PUBLIC__/img/type_qt.png";
        var nameString;

        nameString = new AMap.Marker({ //创建自定义点标注
            map: mapObj,
            position: new AMap.LngLat(locposX, locposY),
            offset: new AMap.Pixel(-10,-34),
            icon: imgString
        });
        var info = [];
        info.push("<b>"+titleString+"</b><br>");
        info.push("<div style='line-height: 150%; padding: 10px 4px; border-top:#e3e3e3 solid 1px; margin-top: 10px; '>地址："+contentString+"</div>");
        var inforWindow = new AMap.InfoWindow({
            offset:new AMap.Pixel(5,-23),
            content:info.join("")
        });
        AMap.event.addListener(nameString,"mouseover",function(e){
            inforWindow.open(mapObj,nameString.getPosition());
        });
    }

    function instruct(e){
        var stateID = $(e).attr("data-id");//状态id
        $("input[name='stateID']").val(stateID);
        var stateCode = $(e).attr("data-location");
        $("input[name='stateCode']").val(stateCode);
        var stateName = $(e).children().eq(0).attr("alt");
        if(stateName == "空闲"){
            $(".dianchi_i").removeClass("dc_02");
            $(".dianchi_i").removeClass("dc_03");
            $(".dianchi_i").removeClass("dc_04");
            $(".dianchi_i").addClass("dc_01");
            $(".state_sapn").text("空闲");
        }else if(stateName == "充电"){
            $(".dianchi_i").removeClass("dc_01");
            $(".dianchi_i").removeClass("dc_03");
            $(".dianchi_i").removeClass("dc_04");
            $(".dianchi_i").addClass("dc_02");
            $(".state_sapn").text("充电");
        }else if(stateName == "已预约"){
            $(".dianchi_i").removeClass("dc_01");
            $(".dianchi_i").removeClass("dc_02");
            $(".dianchi_i").removeClass("dc_04");
            $(".dianchi_i").addClass("dc_03");
            $(".state_sapn").text("已预约");
        }else if(stateName == "下线"){
            $(".dianchi_i").removeClass("dc_01");
            $(".dianchi_i").removeClass("dc_02");
            $(".dianchi_i").removeClass("dc_03");
            $(".dianchi_i").addClass("dc_04");
            $(".state_sapn").text("下线");
        }
        var char_id = $(e).attr("data-pid");//桩号
        $(".one").text(char_id);
        var charNumber = $(e).attr("data-oid");//运营二维码
        $("#charID").text(charNumber);
        var trademark = $(e).attr("data-text");//电桩品牌
        $("#trademark").text(trademark);
        var plantAddr = $(e).attr("data-info");//站点详细地址
        $("#addr").text(plantAddr);
        var plantCode = $(e).attr("data-code");//会员卡号
        $("#stationKey").text(plantCode);
        var plantTitle = $(e).attr("data-title");//站点名称
        $("#title").text(plantTitle);
        var charWifi = $(e).attr("data-nld");//电桩是否支持waifi
        if(charWifi == 1){
            $("#wifi").removeClass("wifi_01");
            $("#wifi").text("在线");
        }else{
            $("#wifi").addClass("wifi_01");
            $("#wifi").text("下线");
        }
    }
    function clickOk(e){
        var stateKey  = $("input[name='stateCode']").val();
        var evNumber  = $("#charID").text();//运营二维码
        var userCard  = $("#stationKey").val();//会员卡号
        var url       = "http://id.dz.tt/listen/send8089_v3.php?";
        var sendData  = '';
        var now_user  = '';
        var code      = '';
        var key       = getRandomNum(10,99);
        var token     = getToken(evNumber,key);
        if(userCard == '' || userCard == 0){
            now_user = "01234567890123456789";
        }else{
            now_user = userCard;
        }
        var info = '';
        if(e == "充电中"){
            info = "您确定开启吗？";
            code = "410104";
        }else if(e == "空闲"){
            info = "您确定关闭吗？";
            code = "410401";
        }else if(e == "已预约"){
            info = "您确定预约吗？";
            code = "9302";
        }else if(e == "取消预约"){
            info = "您确定取消预约吗？";
            code = "9301";
        }
        alertify.confirm(info, function (i) {
            if (i) {
                sendData = 'code='+code+'&key='+key+'&userCard='+now_user+'&token='+token+'&evCharNumber='+evNumber;
                $.get(url+sendData);
            } else {
                alertify.error("取消操作！");
            }
        }, "mcit_default");
    }
</script>
<div>
    <div id="tan" class="modal  fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--注意！此处为内容-->


                <div style="width: 600px; border:#CCCCCC solid 1px;">
                    <div class="top">
                        <div class="top_left" style="margin-top: 20px"><h3><strong>电桩控制</strong></h3></div>
                        <div class="top_right">运营二维码：<span id="charID"></span><br>电 桩 品 牌 ：<span id="trademark"></span></div>
                        <div class="CB"></div>

                    </div>

                    <div class="buttom_top">
                        <div class="buttom_top_left">
                            <ul>
                                <li>站点名称：<span id="title" style="font-size: 16px"></span></li>
                                <li>详细地址：<span id="addr" style="font-size: 16px"></span></li>
                            </ul>
                        </div>

                        <div id="wifi" class="buttom_top_right">
                        </div>
                        <div class="CB"></div>
                    </div>
                    <div>


                        <div class="buttom_center">
                            <div class="buttom_center_left">
                                <div class="one_hao">
                                    <div><span class="one"></span><span class="hao"><strong>号</strong></span>    </div>
                                    <div class="charge">CHARGE</div>

                                </div>
                                <div class="xian"></div>

                                <div class="dianchi dianchi_i"></div>

                                <div class="state"><span class="state_sapn"></span></div>
                                <div class="dianchi" style="float: right; width: 150px; margin-right:20px"></div>

                                <div class="CB"></div>
                            </div>

                        </div>

                        <ul class="btArrStyle">
                            <input type="hidden" name="stateID" value=""/><input type="hidden" name="stateCode" value=""/><input
                                type="hidden" name="evNumber" value="" id="stationKey"/>
                            <li><a href="javascript:void(0);" target="sendCodeBox" onclick="clickOk('充电中')"><img src="__PUBLIC__/img/btMapCon_1.png" /></a> </li>
                            <li><a href="javascript:void(0);" target="sendCodeBox" onclick="clickOk('空闲')"><img src="__PUBLIC__/img/btMapCon_2.png" /></a> </li>
                            <li><a href="javascript:void(0);" target="sendCodeBox"  onclick="clickOk('已预约')"><img src="__PUBLIC__/img/btMapCon_3.png"/></a> </li>
                            <li><a href="javascript:void(0);" target="sendCodeBox"  onclick="clickOk('取消预约')"><img src="__PUBLIC__/img/btMapCon_4.png" /></a> </li>

                            <div class="CB"></div>
                        </ul>
                    </div>
                </div>
            </div></div>
        <div class="hide" id="cache"></div>
    </div>
    <div id="ccc-widget-toolbox"  style="z-index:999">
        <div id="ccc-widget-filter" >
            <ul>
                <li class="available sel">

                    <a href={:U("Index/map")}  id="refresh" ><i></i>刷新</a>
                </li>
                <li  class="available sel s_now sel">
                    <!-- class: + [sel]/选中 -->
                   
                    <a class="btn  btn-lg" title="现有站点">
                    <em class="value"  style="position: relative; top: -14px;">{$count}</em>
                        <i class="fa fa-map-marker">&nbsp;&nbsp;现有站点</i>
                    </a>
                </li>
                <li  class="powerpile s_state sel ">
                   
                    <a class="btn btn-lg " title="实时站点">
                    <em class="value" style="position: relative; top: -14px;">{$shishi}</em>
                        <i class="fa fa-map-marker">&nbsp;&nbsp;实时站点</i>
                    </a>
                </li>
                <li  class="prepowerpile s_will sel">
                   
                    <a class="btn  btn-lg" title="预设站点">
                    <em class="value"  style="position: relative; top: -14px;">{$yushe}</em>
                        <i class="fa fa-map-marker">&nbsp;&nbsp;预设站点</i>
                    </a>
                </li>
                <li  class="powerpile s_state_1 sel ">
                    <!-- class: + [sel]/选中 -->
                   
                    <a class="btn  btn-lg hot1" title="使用最多">
                        <i class="fa ">&nbsp;&nbsp;使用最多(1000~1200)</i>
                    </a>
                </li>
                <li  class="powerpile s_state_2">
                    
                    <a class="btn btn-lg hot2" title="使用较多">
                        <i class="fa ">&nbsp;&nbsp;使用较(800~1000)</i>
                    </a>
                </li>
                <li  class="powerpile s_state_3">
                    
                    <a class="btn  btn-lg hot3" title="使用一般">
                        <i class="fa ">&nbsp;&nbsp;使用一般(600~800)</i>
                    </a>
                </li>
                <li  class="powerpile s_state_4">
                    
                    <a class="btn btn-lg hot4" title="使用较少">
                        <i class="fa ">&nbsp;&nbsp;使用较少(400~600)</i>
                    </a>
                </li>
                 </li>
                <li  class="powerpile s_state_5">
                    
                    <a class="btn  btn-lg hot5" title="使用很少">
                        <i class="fa ">&nbsp;&nbsp;使用很少(<400)</i>
                    </a>
                </li>
                
            </ul>
        </div>
    
    
    
    
    
   

        <div id="Pop-ups" style="position:absolute;margin-left:250px;margin-top:0">
            <div class="panel">
                <div class="panel-body search-panel-body">
                    <div class="col-xs-5" style=" width:435px;padding: 0;margin: 0">
                        <div class="input-group">
                            <span class="input-group-addon" style="width:80px;">所在地</span>
                            <select id="location-f" name="location_f_1" class="form-control" style="width:129px;">
                                <option value="0">--</option>
                                <volist name="china" id="vo">
                                    <option value="{$vo.code}">{$vo.name}</option>
                                </volist>
                            </select>

                            <select id="location-s" name="location_s_1" class="form-control" style="width:110px;border-left:0">
                                <option value="0">--</option>
                                <volist name="china" id="vo">
                                    <volist name="vo['area']" id="vovo">
                                        <option value="{$vovo.code}" class="{$vo.code}" >{$vovo.name}</option>
                                    </volist>
                                </volist>
                            </select>

                            <select id="location-t" name="location_t_1" class="form-control required" style="width:110px;border-left:0">
                                <option value="0">--</option>
                                <volist name="china" id="vo">
                                    <volist name="vo['area']" id="vovo">
                                        <volist name="vovo['area']" id="vovovo">
                                            <option value="{$vovovo.code}" class="{$vovo.code}" >{$vovovo.name}</option>
                                        </volist>
                                    </volist>
                                </volist>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-4 search-col">
                        <input type="text" name="name" class="form-control" value="{$_GET['name']}"  placeholder="按站点名称进行搜索">
                    </div>
                    <div class="col-xs-1 search-col">
                        <button  type="button" class="btn btn-warning search">
                            <i class="fa fa-search"></i>
                            &nbsp;搜索
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div id="iCenter"></div>
</div>